<template>
  <div class="container">
    <div class="props1">
        <el-divider content-position="left">props数组接收</el-divider>
        <props1 :text="propsData1.Array"></props1>
        <el-form :inline="true" class="demo-form-inline" label-width="150px">
          <el-form-item label="子组件纯数组接收">
            <el-input v-model="form1.Array" placeholder="子组件纯数组接收"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="propsFn1">确定</el-button>
          </el-form-item>
        </el-form>
    </div>
    

    <div class="props2"> 
        <el-divider content-position="left">props对象接收</el-divider>

        <props2 :String="propsData2.String" :Number="propsData2.Number" :Boolean="propsData2.Boolean" :Array="propsData2.Array" :Object="propsData2.Object" ></props2>

        <el-form :inline="true" class="demo-form-inline" label-width="150px">

          <div>
            <el-form-item label="字符串类">
              <el-input v-model="form2.String" placeholder="字符串类"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="propsFn2('String')">查询</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="数字类">
              <el-input v-model="form2.Number" placeholder="数字类"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="propsFn2('Number')">查询</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="布尔类">
              <el-input v-model="form2.Boolean" placeholder="布尔类"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="propsFn2('Boolean')">查询</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="数组类">
              <el-input v-model="form2.Array" placeholder="数组类"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="propsFn2('Array')">查询</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="对象类">
              <el-input v-model="form2.Object" placeholder="对象类"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="propsFn2('Object')">查询</el-button>
            </el-form-item>
          </div>
          

          <div>
            String, Number, Boolean, Array, Object, Date, Function, Symbol 总共6种类型
          </div>
        </el-form>

        <div class="props3">
          <el-divider content-position="left">props验证</el-divider>
          <props3 :propC="'string'"></props3>
      </div>
    </div>
  </div>
</template>

<script>
import props1 from "./model/props1";
import props2 from "./model/props2";
import props3 from "./model/props3";

export default {
  components: {
    props1,
    props2,
    props3
  },
  data() {
    return {
      form1:{
        Array:""
      },
      propsData1:{
        Array:""
      },

      form2:{
        String:"",
        Number:"",
        Boolean:"",
        Array:"",
        Object:"",
        Date:"",
        Function:"",
        Symbol:""
      },
      propsData2:{
        String:"汉字",
        Number:2222,
        Boolean:true,
        Array:["100"],
        Object:{aa:"cc"},
        Date:"",
        Function:"",
        Symbol:""
      },
    };
  },
  
  methods: {
    propsFn1() {
      const $this = this
      $this.propsData1.Array = $this.form1.Array
    },

    propsFn2(type){
      const $this = this
      console.log(type)
      switch(type){
        case "String":
          $this.propsData2[type] = $this.form2[type]
          break;
        case "Number":
          $this.propsData2[type] = parseInt($this.form2[type])
          break;
        case "Boolean":
          let boolean
          if($this.form2[type]=="true"){
            boolean = true
          }
          if($this.form2[type]=="false"){
            boolean = false
          }
          $this.propsData2[type] = boolean || $this.form2[type]
          break;
        case "Array":
          $this.propsData2[type] = JSON.parse($this.form2[type]) || ""
          break;
        case "Object":
          $this.propsData2[type] = JSON.parse($this.form2[type]) || ""
          break;
      }  
      console.log($this.propsData2)   
      
    }
  },
};
</script>
<style scoped>
</style>